// 商品规格
<template>
    <div class="buymodel">
        <div class="model">
            <div class="close_img" @click="closeimg">
                <img src="../../assets/images/goodsDetails/叉@2x.png" alt class="icon"/>
            </div>
            <!-- 固定上面 -->
            <div class="buy_model_top">
                <div class="buy_model_img">
                    <!-- <img :src="imag" class="picture" /> -->
                    <van-image fit="cover" :src="imag" class="picture"/>
                </div>
                <div class="buy_model_count">
                    <p class="pice">
                        <span class="pice_i">￥</span>
                        <span class="pice_w" v-if="this.goodsId == good.goods_spec_id">{{ good.spec_price}}</span>
                        <span class="pice_w" v-if="this.goodsId != good.goods_spec_id">{{ first_price}}</span>
                        <i v-if="goods.specs_type==2&&this.goodsId != good.goods_spec_id&&goods.specs.length!=1 && showQi">起</i>
                    </p>
                    <p class="stock">
                        <span>库存</span>
                        <span v-if="this.goodsId != good.goods_spec_id">{{ goods.stock }}件</span>
                        <span v-if="this.goodsId == good.goods_spec_id">{{ good.spec_stock }}件</span>
                    </p>
                    <p class="specifi" v-if="this.goodsId == good.goods_spec_id">已选: {{ good.spec_name }}</p>
                    <p class="specifi" v-if="this.goodsId != good.goods_spec_id">请选择规格</p>
                </div>
            </div>
        </div>
        <div class="space"></div>
        <!-- 中间可滑动区域 -->
        <div class="slide" :class="{'slides':!hidshow}">
            <div class="buy_model_middle">
                <h3 class="buy_model_guige">规格</h3>
                <ul class="guige_list">
                    <button
                            class="guige_item"
                            :disabled="good_name.spec_stock == 0"
                            :class="good_name.spec_stock == 0? 'guige_item': goodsId == good_name.goods_spec_id && good_name.spec_stock != 0? 'active' : 'active_grey'"
                            @click="click(good_name.goods_spec_id, good_name)"
                            v-for="(good_name, index) in goods.specs"
                            :key="index"
                    >{{ good_name.spec_name }}
                    </button>
                </ul>
            </div>
            <div class="buy_model_bottom">
                <div class="top">
                    <span>购买数量</span>
                    <div class="right">
                        <van-stepper
                                v-model="value"
                                :integer="true"
                                @minus="minus"
                                @plus="plus"
                                @change="change"
                                :disable-plus="disablePlus"
                                :disable-minus="disableMinus"
                                :min="min"
                                :max="max"
                                input-width="60px"
                                @blur='blur'
                                @focus="focus"
                                :disabled="disabled"
                        />
                    </div>
                </div>

                <p
                        class="note"
                        v-if="good.min_sale_num != 0 && good.max_sale_num != 0 && this.goodsId == good.goods_spec_id "
                >最低限购{{ good.min_sale_num }}件~最高限购 {{ good.max_sale_num }} 件</p>
                <p
                        class="note"
                        v-if="good.min_sale_num==0&&good.max_sale_num!=0 ||good.max_sale_num==0&&good.min_sale_num!=0 && this.goodsId == good.goods_spec_id "
                >
                    <span>限购范围</span>
                    <span style="margin-left:20px" v-if="good.min_sale_num!=0">最低限购{{ good.min_sale_num }}件</span>
                    <span style="margin-left:20px" v-if="good.max_sale_num!=0">最高限购{{ good.max_sale_num }}件</span>
                </p>
            </div>

            <div class="prices"></div>
        </div>
        <div class="buttons" v-if="hidshow">
            <div class="button" @click="buyNow" v-if="mark==2">立即购买</div>
            <div class="button" @click="buycom" v-if="mark==1">完成</div>
        </div>
        <van-popup v-model="showLogin" :close-on-click-overlay="false">
            <Login @closelogin="toLogin" @getSmsCode="getSmsCode" @userLogin="userLogin"></Login>
        </van-popup>
    </div>
</template>

<script>
  import {Toast} from "vant";
  import {userLogin, confirmOrder} from "../../api/index";
  import Login from "../../components/login/login";

  export default {
    components: {
      Login
    },
    name: "goodsSpecification",
    props: {
      goods: Object,
      query: Object,
      mark: Number,
      showQi: Boolean
    },
    data() {
      return {
        showLogin: false,
        value: "", //步进器初始值
        goodsId: -1,
        good: {},
        min: "",
        max: "",
        sufficient: [], //库存充足
        empty: [], //库存为空
        disablePlus: false,
        disableMinus: false,
        docmHeight: document.documentElement.clientHeight, //默认屏幕高度
        showHeight: document.documentElement.clientHeight, //实时屏幕高度
        hidshow: true, //显示或者隐藏footer,
        first_price: "",
        imag: "",
        imags: [],
        jump: false,
        disabled: false
      };
    },
    // beforeRouteEnter (to, from, next) {
    //   console.log(to.meta)
    //   if (to.meta.name === 'confirmorder' || to.meta.name === 'scanToPay' || to.meta.name === 'orderDetails') {}
    //   next()
    // },
    created() {
      // 处理轮播数据,规格默认显示第一个图片

      this.goods.goods_media.forEach(item => {
        if (item.media_type == 1) {
          this.imags.push(item);

          this.imag = this.imags[0].url;
          // console.log(this.imag);
        }
      });

      function compare(property) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        };
      }

      let specs = JSON.parse(JSON.stringify(this.goods.specs));
      specs.sort(compare("spec_price"));
      this.first_price = specs[0].spec_price;
      this.goods.specs.forEach(el => {
        if (el.spec_stock != 0) {
          this.sufficient.push(el);
          // console.log(this.sufficient.sort(compare("spec_price"))); //对库存不为0 的 按照价格进行排序
          // this.goodsId = this.sufficient[0].id; //下标进行赋值  实现 初始效果
          // this.good. = this.sufficient[0]; //初始的价格 内容展示
          // this.good.spec_price = this.sufficient[0].spec_price;
          this.good.spec_stock = this.goods.stock;
        }
      });
    },
    methods: {
      focus() {
        let _this = this
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isAndroid) {
          const innerHeight = window.innerHeight;
          window.addEventListener('resize', focusoutFunc)
          let copyFocusoutFunc = focusoutFunc

          function focusoutFunc() {
            const newInnerHeight = window.innerHeight;
            // Toast(innerHeight + '----' + newInnerHeight)
            if (innerHeight > newInnerHeight) {
              // 键盘弹出事件处理
              _this.hidshow = false
            } else {
              // 键盘收起事件处理
              _this.hidshow = true
              _this.disabled = true
              setTimeout(() => {
                _this.disabled = false
              }, 100)
              // Toast('执行了')
              window.removeEventListener('resize', copyFocusoutFunc, false)
            }
          }
        }
      },
      // 处理ios键盘收起 底部留白问题
      blur() {
        // var u = navigator.userAgent;
        // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // if (isiOS) {
        //   this.showHeight = this.showHeight + 1

        // }
        // window.removeEventListener('resize')
      },
      //点击完成
      buycom() {
        this.$emit("closespeci", false);
      },
      getSmsCode(tel) {
        getSms({phone: Number(tel), event: "login"}).then(res => {
        });
      },
      // login 组件回调  用户手机号登录

      userLogin(params) {
        Toast.loading({message: "加载中", forbidClick: true});
        userLogin(params).then(res => {
          this.$cookie.set('Token', res.data.authorization)
          this.showLogin = false;
        });
      },
      toLogin(showLogin) {
        this.showLogin = showLogin;
      },
      closeimg() {
        this.$emit("closespeci", false);
      },

      click(index, specs_name) {
        if (index == this.goodsId) {
          this.goodsId = -1;
          specs_name.conditions = true;
          this.$emit("getprice", "");
        } else {
          if (specs_name.spec_stock != 0) {
            this.$emit("getprice", specs_name);
            this.good = specs_name;
            this.min =
              this.good.min_sale_num <= "1"
                ? "1"
                : Number(this.good.min_sale_num);
            this.max =
              this.good.max_sale_num == 0
                ? this.good.spec_stock
                : this.good.max_sale_num <= this.good.spec_stock
                ? this.good.max_sale_num
                : this.good.spec_stock;
          }
          this.goodsId = index;
          specs_name.conditions = false;
          // this.$emit("getprice", specs_name);
        }
      },
      buyNow() {
        if (this.goodsId != this.good.goods_spec_id) {
          Toast("请选择规格");
        } else if (this.value > this.good.spec_stock) {
          Toast("库存不足");
        } else {
          let query = {
            promotion_user_id: this.query.promotion_user_id,
            promotion_sign: this.query.sign,
            goods_id: this.query.goodsId,
            quantity: this.value
          };
          if (this.good.goods_spec_id != 0) {
            query.goods_spec_id = this.good.goods_spec_id;
          }
          let params = this.$route.query;
          params.goods_id = Number(this.query.goodsId);
          params.goods_spec_id = this.good.goods_spec_id || null;
          params.quantity = Number(this.value);
          params.rent_plan = 0;
          // 判断买的数量是否足够
          confirmOrder(params).then(iten => {
            if (iten) {
              if (this.is_qq()) {
                // history.pushState(params, '/goodsDetails', '')
              }
              this.$router.push({
                name: "confirmorder",
                query: query
              });
            }
          })
        }
      },
      is_qq() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        if (sUserAgent.match(/QQ/i) == 'qq') {
          return true
        } else {
          return false
        }
      },
      minus() {
      },
      // 异步修改步进器的值
      change(value1) {
        this.$emit('change_num', value1)
        if (value1 < this.good.spec_stock) {
        }
      },
      // 增加
      plus() {
      }
    },
  };
</script>
<style lang="scss">
    .right {
        .van-stepper__minus--disabled,
        .van-stepper__plus--disabled {
            background: #ffffff;
            // margin-right: -1px;
        }

        .van-stepper__minus,
        .van-stepper__plus {
            background: #ffffff;

        }

        .van-stepper__plus::after {
            width: 2px;
        }

        .van-stepper__minus::before,
        .van-stepper__plus::before {
            height: 2px;
        }

        .van-stepper__input {
            font-weight: 600;
            font-size: 14px !important;
            color: #2f2f2f;
            height: 25px;
            border-radius: 4px;
        }
    }

    button::-moz-focus-inner {
        outline: none;
    }

    .top {
        .van-stepper__minus {
            background: #fff !important;
        }

        .van-stepper__plus {
            background: #fff !important;
        }
    }
</style>
<style scoped lang="scss">
    .border-1px {
        &::after {
            content: "";
            width: 180%;
            position: absolute;
            top: 0;
            left: 50%;
            border: 0.5px solid #f5f5f5;
            border-radius: 4px;
            -webkit-transform: scale(0.5, 0.5);
            transform: scale(0.5, 0.5) translateX(-50%);
            transform-origin: top left;
        }
    }

    span {
        display: inline-block;
    }

    ul,
    li {
        list-style: none;
        margin: 0;
    }

    .buymodel {
        transform: inherit; //让固定地位元素根据此元素 进行定位
        height: 526px;
        
        .model {
            width: 100%;
            height: 150px;
            background: #fff;
            position: fixed;
            border-radius: 20px 20px 0 0;
            z-index: 999;
            max-width: 10rem;
            .close_img {
                position: absolute;
                top: 10px;
                right: 6px;
                width: 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;

                .icon {
                    height: 12px;
                    width: 12px;
                }
            }

            .buy_model_top {
                margin-top: 26px;
                display: flex;
                align-items: flex-end;
                z-index: 99999;
                max-width: 10rem;
                .buy_model_img {
                    width: 105px;
                    height: 105px;
                    background: rgba(230, 230, 230, 1);
                    border-radius: 6px;
                    margin-left: 17px;

                    .picture {
                        width: 105px;
                        height: 105px;
                        // display: block;
                        border-radius: 4px;
                        overflow: hidden;
                    }
                }

                .buy_model_count {
                    margin-left: 15px;
                    font-weight: bold;
                    font-size: 12px;
                    // margin-bottom: 2px;
                    .pice {
                        color: #ff0015;
                        font-weight: 800;

                        font-size: 20px;
                        line-height: 20px;

                        .pice_i {
                            font-size: 14px;
                            font-weight: bold;
                        }

                        i {
                            font-style: normal;
                            font-size: 12px;
                            margin-left: 3px;
                        }
                    }

                    .stock {
                        color: rgba(153, 153, 153, 1);
                        line-height: 15px;
                        margin-top: 8px;
                        font-size: 12px;

                        font-weight: 400;
                    }

                    .specifi {
                        color: #2f2f2f;
                        line-height: 15px;
                        font-size: 12px;

                        font-weight: 400;
                        margin-top: 9px;
                        width: 220px;
                    }
                }
            }
        }

        .space {
            height: 158px;
        }

        .slide {
            overflow-y: scroll;
            // overflow-y: visible;
            // height: 359px;
            height: 287px;
        }

        .slides {
            height: 350px !important;
        }

        .buy_model_middle {
            // height: 350px;
            // overflow: hidden;
            margin-bottom: 15px;
            margin-left: 17px;
            color: rgba(47, 47, 47, 1);

            .buy_model_guige {
                font-size: 14px;
                font-weight: bold;
                line-height: 22px;
            }

            .guige_list {
                overflow: hidden;

                button {
                    border: 0;
                    background-color: transparent;
                    outline: none;
                    // border: none;
                }

                .guige_item {
                    float: left;
                    height: 31px;
                    background: rgba(246, 245, 245, 1);
                    border-radius: 2px;
                    font-size: 12px;
                    color: #cccccc;

                    font-weight: 400;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 10px;
                    margin-right: 10px;

                    &.active {
                        background: #ffdd07;
                        color: #2f2f2f;
                    }

                    &.active_grey {
                        background: rgba(245, 245, 245, 1);
                        color: #2f2f2f;

                    }
                }

            }
        }

        .buy_model_bottom {
            margin: 15px 17px 0;

            .top {
                border-top: 0.5px solid rgba(245, 245, 245, 1);
                padding-top: 17px;
                display: flex;
                justify-content: space-between;

                span {
                    font-size: 14px;
                    font-weight: bold;

                    color: #2f2f2f;
                    line-height: 28px;
                }
            }

            .note {
                margin-top: 16px;
                font-size: 11px;
                color: rgba(153, 153, 153, 1);
            }
        }

        .prices {
            height: 119px;
        }

        .buttons {
            background: #fff;
            height: 63px;
            position: fixed;
            // position: absolute;
            width: 100%;
            bottom: 0;
            bottom: constant(safe-area-inset-bottom);
            bottom: env(safe-area-inset-bottom);
            max-width: 10rem;
        }

        .button {

            width: 355px;
            display: flex;
            justify-content: center;
            margin: 0 11px;
            // position: fixed;
            // bottom: 17px;
            height: 46px;
            background: #ffdd07;
            border-radius: 30px;
            color: rgba(47, 47, 47, 1);
            font-size: 14px;
            font-weight: bold;

            line-height: 46px;
        }
    }
</style>
